<template>
  <div class="pre-order-details">
    <h2>预下单详情</h2>

    <div class="input-section">
      <el-input v-model="inputPreOrderNo" placeholder="请输入预下单号"></el-input>
      <el-button type="primary" @click="loadPreOrderDetails" :loading="loading">加载预下单详情</el-button>
    </div>

    <div v-if="orderInfo">
      <div class="order-info">
        <h3>订单信息</h3>
        <p><strong>姓名:</strong> {{ orderInfo.order.name }}</p>
        <p><strong>手机号:</strong> {{ orderInfo.order.mobile }}</p>
        <p><strong>邮箱:</strong> {{ orderInfo.order.email }}</p>
        <p><strong>描述:</strong> {{ orderInfo.order.desc }}</p>
        <p><strong>是否同意条款:</strong> {{ orderInfo.order.is_agree ? '是' : '否' }}</p>
      </div>

      <div class="table-items">
        <h3>商品信息</h3>
        <div v-for="item in orderInfo.tableItem" :key="item.productId" class="table-item">
          <p><strong>产品 ID:</strong> {{ item.productId }}</p>
          <p><strong>数量:</strong> {{ item.quantity }}</p>
          <p><strong>单价:</strong> {{ item.price }}</p>
          <p><strong>总价:</strong> {{ item.allPrice }}</p>
          <p><strong>类型:</strong> {{ item.type }}</p>
        </div>
      </div>

      <div class="total-info">
        <h3>总计</h3>
        <p><strong>总金额:</strong> {{ orderInfo.totalAmount }}</p>
        <p><strong>商品总数量:</strong> {{ orderInfo.totalCount }}</p>
      </div>

      <p><strong>预下单号:</strong> {{ preOrderNo }}</p>
      <p v-if="payPalOpen === '1'"><strong>PayPal 支付已开启</strong></p>
    </div>

    <el-alert v-if="error" :title="error" type="error" show-icon></el-alert>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';

const store = useStore();

const inputPreOrderNo = ref('');
const loading = ref(false);
const error = ref('');

const preOrderNo = computed(() => store.getters['loadPreOrderDetails/getPreOrderNo']);
const orderInfo = computed(() => store.getters['loadPreOrderDetails/getOrderInfo']);
const payPalOpen = computed(() => store.getters['loadPreOrderDetails/getPayPalOpen']);

const loadPreOrderDetails = async () => {
  if (!inputPreOrderNo.value) {
    ElMessage.warning('请输入预下单号');
    return;
  }

  loading.value = true;
  error.value = '';

  try {
    store.commit('loadPreOrderDetails/SET_PRE_ORDER_NO', inputPreOrderNo.value);
    const result = await store.dispatch('loadPreOrderDetails/loadPreOrderDetails');

    if (!result.success) {
      error.value = result.error;
    }
  } catch (err) {
    console.error('加载预下单详情失败:', err);
    error.value = '加载预下单详情失败，请稍后再试';
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.pre-order-details {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.input-section {
  display: flex;
  margin-bottom: 20px;
}

.input-section .el-input {
  margin-right: 10px;
}

.order-info, .table-items, .total-info {
  margin-bottom: 20px;
}

h3 {
  margin-bottom: 10px;
}

p {
  margin: 5px 0;
}

.table-item {
  padding: 10px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
}

.total-info {
  border-top: 1px solid #ddd;
  padding-top: 10px;
}
</style>
